<!--
 * @Author: zhoujinlong 765637726@qq.com
 * @Date: 2024-04-23 08:54:49
 * @LastEditors: zhoujinlong 765637726@qq.com
 * @LastEditTime: 2024-04-24 09:02:47
 * @FilePath: \election-yd\src\renderer\src\screenHtml\screen.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<!-- 
<!doctype html>
<html>
  <head>
    <title>Selection Area</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
 
    <script>
      //   const { ipcRenderer } = require('electron')
      //   import { ipcRenderer } from 'electron
      //   const { ipcRenderer } = require('../../../../node_modules/@electron')

      console.log('window', window)
      console.log('windowelectron', window.electron)
      console.log('windowapi', window.api)

      document.addEventListener('mousedown', function (event) {
        const startX = event.x
        const startY = event.y

        document.addEventListener('mousemove', onMouseMove)
        document.addEventListener('mouseup', onMouseUp)

        function onMouseMove(moveEvent) {
          const width = Math.abs(moveEvent.x - startX)
          const height = Math.abs(moveEvent.y - startY)
          // Update the selection overlay here
        }

        function onMouseUp(upEvent) {
          document.removeEventListener('mousemove', onMouseMove)
          document.removeEventListener('mouseup', onMouseUp)
          window.electron.ipcRenderer.send('capture-screen', {
            x: Math.min(startX, upEvent.x),
            y: Math.min(startY, upEvent.y),
            width: Math.abs(upEvent.x - startX),
            height: Math.abs(upEvent.y - startY)
          })

     
        } 
      })

      document.addEventListener('keydown', (event) => {
        console.log(event.key );
        if (event.key === 'Escape') {
          window.electron.ipcRenderer.send('get-close-window2', { closeWindows2: true })
        }
      })
    </script>
  </body>
</html> -->

<!doctype html>
<html>
  <head>
    <title>Selection Area</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        margin: 0;
        padding: 0;
      }

      #selection {
        position: absolute;
        border: 2px dashed #fff;
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div id="selection"></div>
    <script>
      document.addEventListener('mousedown', function (event) {
        const startX = event.clientX
        const startY = event.clientY
        const selection = document.getElementById('selection')

        document.addEventListener('mousemove', onMouseMove)
        document.addEventListener('mouseup', onMouseUp)

        function onMouseMove(moveEvent) {
          const width = Math.abs(moveEvent.clientX - startX)
          const height = Math.abs(moveEvent.clientY - startY)
          const left = Math.min(startX, moveEvent.clientX)
          const top = Math.min(startY, moveEvent.clientY)

          selection.style.width = `${width}px`
          selection.style.height = `${height}px`
          selection.style.left = `${left}px`
          selection.style.top = `${top}px`
          
        }

        function onMouseUp(upEvent) {
          document.removeEventListener('mousemove', onMouseMove)
          document.removeEventListener('mouseup', onMouseUp)

          const x = Math.min(startX, upEvent.clientX)
          const y = Math.min(startY, upEvent.clientY)
          const width = Math.abs(upEvent.clientX - startX)
          const height = Math.abs(upEvent.clientY - startY)

          window.electron.ipcRenderer.send('capture-screen', { x, y, width, height })

          console.log('onMouseUp');
        }
      })

      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
          window.electron.ipcRenderer.send('get-close-window2', { closeWindows2: true })
        }
      })
    </script>
  </body>
</html>
